// 不合格问题
<template>
    <f7-page class="hntsh">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>不合格问题</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <van-tabs>
            <van-tab title="存在问题" name="1">
                <van-form
                    ref="form"
                    :readonly="
                        orgTypeCode != 'CONSTRUCTION' || status != '待回复'
                    "
                >
                    <f7-list
                        media-list
                        class="search-list"
                        v-if="models.questionList.length > 0"
                    >
                        <li
                            v-for="(item, index) in models.questionList"
                            :key="index"
                        >
                            <div class="replay-top-box">
                                <div class="index-box">{{ index + 1 }}</div>
                                <div class="right-box">
                                    <div class="code">
                                        {{
                                            item.standardName
                                        }}
                                    </div>
                                    <div class="name-box">
                                        <span
                                            >处理要求：<span class="value">{{
                                                item.question
                                            }}</span></span
                                        >
                                    </div>
                                    <div class="name-box">
                                        <span
                                            >所属分类：<span class="value">{{
                                                item
                                                    .questionType
                                                    | DictItem(
                                                        models.eqmQuestionType
                                                    )
                                            }}</span></span
                                        >
                                    </div>
                                    <div class="name-box">
                                        <span
                                            >所属项目：<span class="value">{{
                                                item
                                                    .questionLevel
                                                    | DictItem(
                                                        models.eqmQuestionLevel
                                                    )
                                            }}</span></span
                                        >
                                    </div>
                                    <qm-file-upload
                                        :ref="`eqmCheckQuestion${index + 1}`"
                                        :galleryOptions="{
                                            multiple: true,
                                            maximum: 9,
                                        }"
                                        extensions="jpg,jpeg,png"
                                        disabled
                                        :params="{
                                            type: 'attach',
                                            dataKey:
                                                item.questionId,
                                            bizType: 'eqmCheckQuestion',
                                        }"
                                        :uploadId="`eqmCheckQuestion${index + 1}`"
                                    >
                                    </qm-file-upload>
                                    <template v-if="orgTypeCode == 'CONSTRUCTION' && status == '待回复'">
                                        <div class="reply-title">处理回复</div>
                                        <div class="select-box">
                                            <van-field
                                                v-model="models.replyList[index].replyContent"
                                                label=""
                                                rows="3"
                                                autosize
                                                type="textarea"
                                                placeholder="请描述处理结果"
                                                :rules="[
                                                    {
                                                        required: true,
                                                        message: '请输入正确内容',
                                                    },
                                                ]"
                                            >
                                            </van-field>
                                        </div>
                                        <qm-file-upload
                                            :ref="`eqmCheckReply${index + 1}`"
                                            :galleryOptions="{
                                                multiple: true,
                                                maximum: 9,
                                            }"
                                            extensions="jpg,jpeg,png"
                                            :disabled="
                                                orgTypeCode != 'CONSTRUCTION' ||
                                                status != '待回复'
                                            "
                                            :params="{
                                                type: 'attach',
                                                dataKey: models.replyList[index].replyId,
                                                bizType: 'eqmCheckReply',
                                            }"
                                            :uploadId="`eqmCheckReply${index + 1}`"
                                        >
                                        </qm-file-upload>
                                    </template>
                                </div>
                            </div>
                            <div class="replay-bottom-box">
                                <section 
                                    v-for="(rItem,rindex) in item.replyList" 
                                    :key="rindex+'r'" 
                                    :style="rItem.replyUserName||rItem.replyTime||rItem.replyContent?'padding:10px 10px 5px':'padding:0'"
                                >
                                    <span v-if="rItem.confirmStatus==1" class="tag tag-blue">通过</span>
                                    <span v-if="rItem.confirmStatus==2" class="tag tag-red">退回</span>
                                    <div class="contents" v-if="rItem.replyUserName||rItem.replyTime||rItem.replyContent">
                                        <p>
                                            <span>{{rItem.replyUserName||'--'}}</span>
                                            <span>{{rItem.replyTime|date('yyyy-MM-dd hh:mm')}}</span>
                                        </p>
                                        <p>{{rItem.replyContent||'--'}}</p>
                                        <qm-file-upload :disabled="true"
                                                        :isDefaultFile="true"
                                                        :defaultFiles="rItem.replyAttachs"
                                                        :params="{type:'attach', dataKey: rItem.replyId, bizType: 'eqmCheckReply'}">
                                        </qm-file-upload>
                                    </div>
                                </section>
                            </div>
                        </li>
                    </f7-list>
                    <v-empty v-else description="暂无数据" />
                </van-form>
                <f7-toolbar
                    position="bottom"
                    no-shadow
                    class="fff"
                    v-if="orgTypeCode == 'CONSTRUCTION' && status == '待回复'"
                >
                    <f7-button fill class="submit-btn" @click="sure(1)"
                        >提交</f7-button
                    >
                </f7-toolbar>
                <f7-toolbar
                    position="bottom"
                    no-shadow
                    class="fff"
                    v-if="isCheckOrg && status == '待审核'"
                >
                    <f7-button
                        fill
                        class="submit-btn back-btn"
                        @click="showPinion = true"
                        >退回</f7-button
                    >
                    <f7-button fill class="submit-btn" @click="sure(2)"
                        >通过</f7-button
                    >
                </f7-toolbar>
            </van-tab>
            <van-tab title="流程进度" name="2">
                <v-accordion
                    title="业务流程"
                    class="infoList noBorder"
                    disabled
                >
                    <v-workflow-step
                        :data="models.eqmQuestionStatusEnum"
                        stepName="name"
                        :showSubtitle="false"
                    ></v-workflow-step>
                </v-accordion>
                <v-accordion
                    title="操作记录"
                    class="infoList noBorder"
                    disabled
                >
                    <v-workflow-list
                        :data="models.workItem"
                        userName="assigneeName"
                        time="memo"
                        opinion="opinionText"
                    ></v-workflow-list>
                </v-accordion>
            </van-tab>
        </van-tabs>
        <!-- 审核意见 -->
        <v-popup-opinion
            v-model="showPinion"
            :selectUser="selectUser"
            ref="opinion"
            @save="emitSave"
        >
        </v-popup-opinion>
        <!-- 审核意见 end -->
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
export default class instance extends controller {
    mixin() {
        return {
            props: {
                checkId: {
                    type: String,
                },
                caseId: {
                    type: String,
                },
                propertyId: {
                    type: String,
                },
                orgTypeCode: {
                    type: String,
                },
                isCheckOrg: {
                    type: Boolean,
                },
                status: {
                    type: String,
                },
            },
            data() {
                return {
                    models: {
                        questionList: [],
                        replyList: [],
                        eqmQuestionType: [],
                        eqmQuestionLevel: [],
                        eqmQuestionStatusEnum: [],
                        workItem: [],
                    },
                    showProject: false,
                    feedback: '',
                    selectUser: {
                        selectComment: null,
                        comment: null,
                        comments: [],
                        tran: [],
                        activity: '',
                        users: [],
                    },
                    showPinion: false,
                }
            },
            mounted() {
                this.getData()
            },
            methods: {
                getData() {
                    let checkId = this.$f7route.query.checkId;
                    let propertyId = this.$f7route.query.propertyId;
                    if(this.checkId) {
                        checkId = this.checkId;
                    }
                    if(this.propertyId) {
                        propertyId = this.propertyId;
                    }
                    this.$f7.request.post(
                        `/app/equipment/eqmCheck/queryQuestion`,
                        {
                            checkId: checkId,
                            propertyId: propertyId,
                        },
                        (r) => {
                            r = JSON.parse(r)
                            if (r && r.success) {
                                this.models = r.parameters
                                let activeIndex = ''
                                if(!this.status) {
                                    this.status = this.models.reservedMap.status;
                                }
                                this.models.eqmQuestionStatusEnum.forEach(
                                    (element, index) => {
                                        if (this.status == element.name) {
                                            element.isActive = 1
                                            activeIndex = index
                                        } else {
                                            element.isActive = 0
                                        }
                                    }
                                )
                                console.log(activeIndex,1111);
                                this.models.eqmQuestionStatusEnum.forEach(
                                    (element, index) => {
                                        if (
                                            activeIndex &&
                                            activeIndex > index
                                        ) {
                                            element.isActive = 2
                                        }
                                        if(activeIndex==3&&element.name=='已完成')element.isActive = 2
                                    }
                                )
                                if(!this.orgTypeCode) {
                                    this.orgTypeCode = this.models.prjEngineeOrg.orgTypeCode;
                                }
                                if(!this.isCheckOrg) {
                                    this.isCheckOrg = this.models.isCheckOrg;
                                }
                                if(!this.caseId) {
                                    this.caseId = this.models.caseId;
                                }
                            } else {
                                this.$toast(r.message || '网络错误，请稍后重试')
                            }
                        }
                    )
                },
                // 提交
                emitSave() {
                    if (!this.selectUser.comment) {
                        this.$toast('请填写审核意见')
                        return false
                    }
                    this.feedback = this.selectUser.comment
                    this.showPinion = false
                    this.models.replyList[0].confirmStatus = 2
                    this.sure(1)
                },
                //提交
                sure(index) {
                    var self = this
                    self.$refs.form
                        .validate()
                        .then((_) => {
                            if (index == 2) {
                                self.models.replyList[0].confirmStatus = 1
                            }
                            self.$f7.request.post(
                                `/app/equipment/eqmCheck/saveQuestion`,
                                {
                                    caseId: this.caseId,
                                    feedback: this.feedback,
                                    replyList: this.models.replyList,
                                    questionList: this.models.questionList,
                                },
                                (r) => {
                                    r = JSON.parse(r)
                                    if (r && r.success) {
                                        this.$f7.dialog.alert(
                                            '提交成功',
                                            () => {
                                                this.$f7.views.current.router.back({force:true})
                                            }
                                        )
                                    } else {
                                        this.$toast(
                                            r.message || '网络错误，请稍后重试'
                                        )
                                    }
                                }
                            )
                        })
                        .catch((err) => {
                            console.log(err)
                        })
                },
            },
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/qualityCreate.less');
@{deep} .v-workflow-step,
@{deep} .v-workflow-list {
    padding: 0 16px;
}
@{deep} .v-workflow-list {
    padding-bottom: 10px;
}
.search-list {
    padding: 10px 16px 50px;
    margin:0;
    @{deep}ul{
        background: transparent;
    }
    li {
        margin-bottom:15px;
        .replay-top-box{
            display:flex;
            padding:16px 16px 16px 7px;
            background: #ffffff;
            box-shadow: 0px 4px 18px 0px rgba(16, 67, 136, 0.1);
            border-radius: 4px;
            align-items:flex-start;
            .index-box {
                padding: 2px 8px;
                background: rgba(51, 133, 255, 0.1);
                border-radius: 2px;
                font-size: 13px;
                color: #1990ff;
            }
            .right-box {
                margin-left: 7px;
                flex:1;
                .code {
                    color: #242424;
                    font-size: 16px;
                    margin-bottom:10px;
                }
                .name-box {
                    margin-bottom: 5px;
                    font-size: 13px;
                    font-weight: 400;
                    color: #8995AC;
                    .value{
                        color: #61677A;
                    }
                    &:last-child{
                        margin-bottom:0;
                    }
                }
                .reply-title{
                    font-size:14px;
                    color:#333;
                    border-top: 1px solid #E9EDF7;
                    padding:15px 0 8px;
                }
            }
            @{deep} .icon{
                padding:0 4px;
                color:#B9C1CD;
            }
            .select-box {
                margin-bottom:10px;
                @{deep} .van-cell {
                    padding: 0;
                    background: #F5F7FA;
                    .van-field__error-message{
                        background:#fff;
                    }
                }
    
                @{deep} .input-cell,
                @{deep} textarea{
                    width: 100%;
                    border: 1px solid #E4E8EB;
                    padding: 0 10px;
                    font-size: 13px;
                    border-radius: 2px;
                }
    
                @{deep} textarea {
                    padding: 10px;
                }
    
                @{deep} .van-cell__right-icon {
                    line-height: 34px;
                }
            }
            @{deep}.pic_upload{
                margin:0;
                padding:0;
            }
        }
        .replay-bottom-box{
            background: #ebedf0;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            section{
                display: flex;
                width: 100%;
                padding: 10px 10px 5px;
                border-bottom: 1px solid #e2e7f2;
                box-sizing: border-box;
                &:last-child{
                    border-bottom: none;
                }
                >span{
                    flex-shrink: 0;
                    margin-right: 8px;
                    height: 16px;
                    background: #fff;
                }
                .contents{
                    flex: 1;
                    p{
                        padding: 0;
                        margin: 0;
                        font-size: 13px;
                        &:nth-child(1){
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #909DB6;
                            margin-bottom: 5px;
                        }
                    }
                    /deep/ .pic_upload{
                        margin: 0;
                        box-sizing: border-box;
                        padding: 0;
                        padding-top: 10px;
                        >div{
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>
